<template>
  <AsideStep :detail-data="props.detailData" />

  <el-alert
    v-if="props.detailData.state === '9'"
    type="info"
    :closable="false"
    show-icon
    title="拒绝申请后，提现金额将返还到钱包！"
    style="margin-top: 16px"
  />

  <el-descriptions
    class="global-descriptions"
    title="基本信息"
    :column="1"
    border
  >
    <el-descriptions-item label="渠道商">
      <ProfilePanel
        v-if="props.detailData.user"
        :avatar="props.detailData.user.avatar"
        :nickname="props.detailData.user.nickname"
        :remark="props.detailData.user.remark"
      />
    </el-descriptions-item>
    <el-descriptions-item label="结算状态">
      <PipeTags type="capital" :state="props.detailData.state" />
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="提现信息"
    :column="1"
    border
  >
    <el-descriptions-item label="提现方式">
      <PipeTags type="capital-type" :state="props.detailData.type" />
    </el-descriptions-item>
    <el-descriptions-item label="提现金额">
      <PipeMoney
        v-if="props.detailData.money"
        type="1"
        :money="props.detailData.money"
      />
    </el-descriptions-item>
    <el-descriptions-item label="实际到账金额">
      <PipeMoney
        v-if="props.detailData.moneyReal"
        type="1"
        :money="props.detailData.moneyReal"
      />
    </el-descriptions-item>
    <el-descriptions-item label="手续费（%）">
      {{ props.detailData.charge }}
    </el-descriptions-item>
    <el-descriptions-item label="手续费">
      <PipeMoney
        v-if="props.detailData.chargeMoney"
        type="1"
        :money="props.detailData.chargeMoney"
      />
    </el-descriptions-item>
    <el-descriptions-item label="备注">
      {{ props.detailData.remark }}
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="订单号"
    :column="1"
    border
  >
    <el-descriptions-item label="订单编号">
      {{ props.detailData.orderNo }}
    </el-descriptions-item>
    <el-descriptions-item label="UUID">
      {{ props.detailData.ownId }}
    </el-descriptions-item>
    <el-descriptions-item label="微信批次号">
      {{ props.detailData.batchId }}
    </el-descriptions-item>
    <el-descriptions-item label="微信明细单号">
      {{ props.detailData.batchDetailId }}
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="global-descriptions"
    title="时间线"
    :column="1"
    border
  >
    <el-descriptions-item label="用户申请时间">
      <PipeDatetime :value="props.detailData.createTime" />
    </el-descriptions-item>
    <el-descriptions-item label="平台审核时间">
      <PipeDatetime :value="props.detailData.updateTime" />
    </el-descriptions-item>
    <el-descriptions-item label="提现申请时间">
      <PipeDatetime :value="props.detailData.applyTime" />
    </el-descriptions-item>
    <el-descriptions-item label="提现到账时间">
      <PipeDatetime :value="props.detailData.finishTime" />
    </el-descriptions-item>
    <el-descriptions-item label="提现异常时间">
      <PipeDatetime :value="props.detailData.errorTime" />
    </el-descriptions-item>
    <el-descriptions-item label="平台通知时间">
      <PipeDatetime :value="props.detailData.noticeTime" />
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { PropType } from 'vue';

import AsideStep from './aside-step.vue';

// props
const props = defineProps({
  detailData: {
    type: Object as PropType<API.userCapital.EntitySchema>,
    default: () => ({})
  }
});
</script>

<style lang="scss" scoped>
.global-descriptions {
  margin-top: 16px;
}
</style>
